<template>
  <div class="more-duty h100">
    <div class="left-search">
      <div class="org-select">
        <editForm
          :formConfig="organizationConfig"
          ref="organizationForm"
          :formData="organizationData"
        ></editForm>
      </div>
      <div class="search-result-list">
        <ul class="result-list">
          <li v-for="(item, index) in resultList" :key="index">
            <a @click.prevent="jumpTo(index)">
              <span class="before-dot"></span>
              <span class="item-title">{{ item.position }}</span>
            </a>
          </li>
        </ul>
        <div class="no-data" v-if="!resultList.length">暂无数据</div>
      </div>
    </div>
    <div class="right-list">
      <div class="onDuty" v-for="(item, index) in dutyArr" :key="index">
        <div
          class="location-title-in"
          ref="locationPosition"
          :id="'position' + index"
        >
          <span class="position-item"
            ><i class="iconfont icon-bengzhan"></i> {{ item.position }}</span
          >
        </div>
        <div
          class="duty-item"
          v-show="i.person.length != 0"
          v-for="(i, j) in item.personType"
          :key="j"
        >
          <div class="duty-name">{{ i.typeName }}</div>
          <div class="duty-detail">
            <div class="user-info-item" v-for="(arr, k) in i.person" :key="k">
              <div class="duty-info">
                <span class="onduty-name">{{ arr.staffName }}</span>
                <i class="iconfont icon-shoujihaoma"></i>
                <span class="onduty-phone">{{ arr.user && arr.user.phone || '' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-data" v-if="!dutyArr.length">暂无数据</div>
    </div>
  </div>
</template>

<script>
import {
  getTodayDutyList,
  todayDutyData,
} from "@/api/workStation/workStation.js";
export default {
  props: ["dutyList", "currentOrg"],
  data() {
    return {
      resultList: [],
      organizationConfig: {
        labelWidth: "0px",
        itemArr: [
          {
            type: "dept",
            label: "",
            prop: "organizationName",
            idsStr: "organizationId",
            span: 24,
            placeholder: "请选择",
            methods: (val) => {
              this.getDutyData(val[0].id);
            },
          },
        ],
      },
      organizationData: {},
      dutyArr: [],
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.dutyArr = this.dutyList;
      this.resultList = this.dutyList;
      this.resultList.map((i, index) => {
        i.id = index;
      });
      this.$refs.organizationForm.setFormItem(
        "organizationName",
        this.currentOrg.organizationName
      );
    },
    jumpTo(index) {
      let idStr = "position" + index;
      let anchorElement = document.getElementById(idStr);
      /*如果对应id的锚点存在，就跳转到锚点*/
      if (anchorElement) {
        anchorElement.scrollIntoView({
          behavior: "smooth", // 平滑过渡
          block: "start", // 上边框与视窗顶部平齐。默认值
          inline: "nearest",
        });
      }
    },
    async getDutyData(id) {
      let param = {
        deptId: id,
      };
      await todayDutyData(param)
        .then((res) => {
          if (res.code == 200) {
            let datas = res.data;
            this.dutyArr = [];
            for (let key in res.data) {
              this.type0 = [];
              this.type1 = [];
              this.type2 = [];
              this.type3 = [];
              this.type4 = [];
              res.data[key].map((i) => {
                if (i.type == "0") {
                  (i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  )),
                    this.type0.push(i);
                }
                if (i.type == "1") {
                  (i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  )),
                    this.type1.push(i);
                }
                if (i.type == "2") {
                  (i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  )),
                    this.type2.push(i);
                }
                if (i.type == "3") {
                  (i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  )),
                    this.type3.push(i);
                }
                if (i.type == "4") {
                  (i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  )),
                    this.type4.push(i);
                }
              });
              let obj = {
                position: key,
                personType: [
                  {
                    type: "3",
                    typeName: this.$store.getters.fineDirtDataName(
                      "home_duty_type",
                      "3"
                    ),
                    person: this.type3,
                  },
                  {
                    type: "4",
                    typeName: this.$store.getters.fineDirtDataName(
                      "home_duty_type",
                      "4"
                    ),
                    person: this.type4,
                  },
                  {
                    type: "1",
                    typeName: this.$store.getters.fineDirtDataName(
                      "home_duty_type",
                      "1"
                    ),
                    person: this.type1,
                  },
                  {
                    type: "0",
                    typeName: this.$store.getters.fineDirtDataName(
                      "home_duty_type",
                      "0"
                    ),
                    person: this.type0,
                  },
                  {
                    type: "2",
                    typeName: this.$store.getters.fineDirtDataName(
                      "home_duty_type",
                      "2"
                    ),
                    person: this.type2,
                  },
                ],
              };
              this.dutyArr.push(obj);
            }
          }
          this.resultList = this.dutyArr;
          this.resultList.map((i, index) => {
            i.id = index;
          });
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form-item {
  margin-bottom: 5px;
}
/deep/.el-input-group__append > .el-button {
  padding: 0 15px !important;
}
.more-duty {
  display: flex;
  .left-search {
    width: 250px;
    //height: 100%;
    height: 600px;
    .search-result-list {
      margin-top: 20px;
      height: 555px;
      //height: calc(100% - 50px);
      overflow-y: auto;
    }
  }
  .right-list {
    width: calc(100% - 250px);
    overflow: auto;
    //height: 100%;
    height: 600px;
    .location-title-in {
      font-size: 14px;
      color: #666666;
      height: 26px;
      margin-bottom: 10px;
      border-bottom: 0.5px solid #0d60b4;
      .position-item {
        /*  background: #EAF6FF;
        padding: 5px 4px; */
        background: #0d60b4;
        padding: 5px 4px;
        color: #fff;
        border-radius: 0 8px 0 0;
      }
    }
  }
  .onDuty {
    width: calc(100% - 40px);
    margin: 12px 20px 26px 20px;
    /* &:first-child{
        margin: 40px 20px 26px 20px;
      } */
    .duty-name {
      font-size: 14px;
      font-weight: 500;
      color: #020202;
      text-align: left;
      padding-bottom: 6px;
    }
    .duty-detail {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      min-height: 40px;
      //height: 100%;
      .user-info-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-right: 10px;
        height: calc(100% - 20px);
        /* &:nth-child(4n){
            margin-right:0px;
          } */
        .duty-info {
          width: 186px;
          padding: 0 8px;
          font-size: 14px;
          height: 40px;
          line-height: 40px;
          background: #f8f8f8;
          //border: 1px solid transparent;
          border-radius: 4px;
          color: #666666;
          margin-bottom: 10px;
          &:hover {
            /* cursor: pointer;
              background: #FFFFFF;
              border: 1px solid #0D60B4;
              border-radius: 4px;
              color:#020202; */
          }
          .duty-userName {
            text-align: left;
          }
          .duty-phone {
            padding-top: 6px;
            text-align: left;
          }
          .onduty-name {
            padding-right: 10px;
            text-align: left;
          }
          i {
            color: #cccccc;
          }
        }
      }
    }
  }
  .search-result-list {
    .result-list {
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      .before-dot {
        height: 8px;
        width: 8px;
        display: inline-block;
        border-radius: 50%;
        background: #cccccc;
        margin-right: 12px;
        vertical-align: middle;
        &:hover {
          background: #0d60b4;
        }
      }
      .item-title {
        color: #666666;
        &:hover {
          color: #0d60b4;
          font-weight: 500;
        }
      }
    }
  }
}
</style>